<template>
  <div style="width: 80%; margin-right: 10%; margin-left: 10%; margin-top: 2%">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">{{ user.nickname }}</span
        >&nbsp;&nbsp;的信息
      </div>
      <div class="text item">
        <el-row>
          <el-col :span="8">
            <el-image
              style="width: 150px; height: 150px; border-radius: 50%"
              :src="user.avatar"
              fit="fit"
            ></el-image>
          </el-col>
          <el-col :span="16">
            <el-descriptions
              class="margin-top"
              :title="user.nickname"
              :column="3"
              :size="size"
              border
            >
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                {{ user.username }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-user"></i>
                  性别
                </template>
                {{ user.gender }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline"></i>
                  居住地
                </template>
                {{ user.address }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-pie-chart"></i>
                  订单数
                </template>
                {{ user.orderNumber }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-pie-chart"></i>
                  点赞数量
                </template>
                {{ user.goodNum }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-pie-chart"></i>
                  收藏数量
                </template>
                {{ user.collectNum }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  年龄
                </template>
                {{ user.age }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-s-comment"></i>
                  个性签名
                </template>
                {{ user.signature }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import user from "@/api/user";

export default {
  data() {
    return {
      user: {},
      size: "",
    };
  },

  created() {
    user.getUserById(this.$route.query.id).then((res) => {
      if (res.success) {
        this.user = res.data.user;
        console.log(this.user);
      }
    });
  },

  methods: {
    errorHandler() {
      return true;
    },
  },
};
</script>

<style scope>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>